<template>
    <div class="info-container">
        <div class="selector-container">
            <el-badge :is-dot="isdot1" class="item" >
                <el-button size="larger" @click="toggleShopShow1">点赞</el-button>
            </el-badge>
            <el-badge :is-dot="isdot2" class="item">
                <el-button size="larger" @click="toggleShopShow2">收藏</el-button>
            </el-badge>
            <el-badge :is-dot="isdot3" class="item" type="primary">
                <el-button size="larger" @click="toggleShopShow3">评论</el-button>
            </el-badge>
        </div>
        <el-divider></el-divider>
        <!-- 点赞模板 -->
        <div class="like-container" v-show="shopShow1" >
            <el-card v-for="item in likedata.likelist" :key="item.id" @click.native="jumpTo(item.blogId)" style="margin-bottom: 10px">
                <div slot="header">
                    <el-avatar :src=item.img :size="25"></el-avatar>
                    <span class="textheader">
                        
                        <b>{{item.userName}}</b>
                        点赞了你的《
                        <b>{{item.title}}</b>
                        》
                    </span>
                </div>
                <div class="text-container">
                    <span class="timetext">
                        点赞时间：{{item.createTime}}
                    </span>
                </div>
            </el-card>
           
            <br>
            <!-- 分页 -->
            <el-pagination
                layout="total, prev, pager, next"
                :total="this.likedata.total"
                @current-change="handleLikeChange" 
                :current-page="this.likeCurrentPage"
                :page-size="this.pagesize">
            </el-pagination> 
        </div>
        <!-- 收藏模板 -->
        <div class="collect-container" v-show="shopShow2">
            <el-card v-for="item in collectdata.collectlist" :key="item.id" @click.native="jumpTo(item.blogId)" style="margin-bottom: 10px">
                <div slot="header">
                    <el-avatar :src=item.img  :size="25"></el-avatar>
                    <span class="textheader">
                        
                        <b>{{item.userName}}</b>
                        收藏了你的《
                        <b>{{item.title}}</b>
                        》
                    </span>
                </div>
                <div class="text-container">
                    <span class="timetext">
                        收藏时间：{{item.createTime}}
                    </span>
                </div>
            </el-card>
            <br>
            <!-- 分页 -->
            <el-pagination
                layout="total, prev, pager, next"
                :total="this.collectdata.total"
                @current-change="handleCollectChange" 
                :current-page="collectCurrentPage"
                :page-size="pagesize">
            </el-pagination> 
        </div>
        <!-- 评论模板 -->
        <div class="comment-container" v-show="shopShow3">
            <el-card v-for="item in commentdata.commentlist" :key="item.id" @click.native="jumpTo(item.blogId)" style="margin-bottom: 10px">
                <div slot="header" >
                    <el-avatar :src=item.img :size="25"></el-avatar>
                    <span class="textheader" >
                        
                        <b>{{item.userName}}</b>
                        评论了你的《
                        <b>{{item.title}}</b>
                        》
                    </span>
                </div>
                <div class="text-container">
                    <span class="content-container">
                        评论内容：{{item.content}}
                    </span>
                    <br>
                    <span class="timetext">
                        评论时间：{{item.createTime}}
                    </span>
                </div>
            </el-card>
            <br>
            <!-- 分页 -->
            <el-pagination
                layout="total, prev, pager, next"
                :total="this.commentdata.total"
                @current-change="handleCommentChange" 
                :current-page="commentCurrentPage"
                :page-size="pagesize">
            </el-pagination> 
        </div>
        
    </div>
</template>

<script>
    import requests from '@/api/ajax'
    export default{
        data () {
            return {

                shopShow1: true, //默认内容显示
                shopShow2: false, //默认内容不显示
                shopShow3: false, //默认内容不显示

                likedata: {
                    likelist: [],
                    total: 0,
                },

                collectdata: {
                    collectlist: [],
                    total: 0,
                },

                commentdata: {
                    commentlist: [],
                    total: 0,
                },

                likeCurrentPage: 1, //当前页 刷新后默认显示第一页
                collectCurrentPage: 1, //当前页 刷新后默认显示第一页
                commentCurrentPage: 1, //当前页 刷新后默认显示第一页
                
                pagesize: 5,
                isdot1: false,
                isdot2: false,
                isdot3: false,
            }
        },
        methods: {
            toggleShopShow1 () {
                this.shopShow1 = true
                this.shopShow2 = false
                this.shopShow3 = false
                this.isdot1 = false
            },
            toggleShopShow2 () {
                this.shopShow1 = false
                this.shopShow2 = true
                this.shopShow3 = false
                this.isdot2 = false
            },
            toggleShopShow3 () {
                this.shopShow1 = false
                this.shopShow2 = false
                this.shopShow3 = true
                this.isdot3 = false
            },
            getLikeList() {
                requests.get('/back/heLikeMe',{
                    params: {
                        page: this.likeCurrentPage,
                        pageSize: 5
                    }
                }).then(
                    (res) => {
                        // console.log(res)
                        this.likedata.likelist = res.data.records
                        this.likedata.total = res.data.total
                    }
                )
            },
            handleLikeChange(currentPage){
                this.likeCurrentPage = likeCurrentPage
                // console.log(this.currentPage)
                requests.get('/back/heLikeMe',{
                    params: {
                        page: this.likeCurrentPage,
                        pageSize: 5
                    }
                }).then(
                    (res) => {
                        // console.log(res)
                        this.likedata.likelist = res.data.records
                        this.likedata.total = res.data.total
                    }
                )
            },
            getCollectList() {
                requests.get('/back/heCollectMe',{
                    params: {
                        page: this.collectCurrentPage,
                        pageSize: 5
                    }
                }).then(
                    (res) => {
                        // console.log(res)
                        this.collectdata.collectlist = res.data.records
                        this.collectdata.total = res.data.total
                    }
                )
            },
            handleCollectChange(collectCurrentPage){
                this.collectCurrentPage = collectCurrentPage
                // console.log(this.currentPage)
                requests.get('/back/heCollectMe',{
                    params: {
                        page: this.collectCurrentPage,
                        pageSize: 5
                    }
                }).then(
                    (res) => {
                        // console.log(res)
                        this.collectdata.collectlist = res.data.records
                        this.collectdata.total = res.data.total
                    }
                )
            },
            getCommentList() {
                requests.get('/back/heCommentMe',{
                    params: {
                        page: this.commentCurrentPage,
                        pageSize: 5
                    }
                }).then(
                    (res) => {
                        // console.log(res)
                        this.commentdata.commentlist = res.data.records
                        this.commentdata.total = res.data.total
                    }
                )
            },
            handleCommentChange(currentPage){
                this.commentCurrentPage = currentPage
                // console.log(this.currentPage)
                requests.get('/back/heCommentMe',{
                    params: {
                        page: this.commentCurrentPage,
                        pageSize: 5
                    }
                }).then(
                    (res) => {
                        // console.log(res)
                        this.commentdata.commentlist = res.data.records
                        this.commentdata.total = res.data.total
                    }
                )
            },
            jumpTo(id){
                // console.log(id);
                this.$router.push('/blogs/?id=' + id)
            }
        },
        created() {
            this.getLikeList()
            this.getCollectList()
            this.getCommentList()
        },
    }
</script>

<style lang="less" scoped>
.info_container{
      height: 600px;
      width: 700px;
      margin-left: 150px;
      margin-top: 50px;
      font-size: larger;
}
// .item {
     // margin: 50px;
    
// }
.textheader {
    font-size: 20px;
    padding-left: 10px;
    // padding-bottom: 10px;
    
}
.timetext {
    float: right;
    margin-bottom: 10px;
    font-size: 10px;
    color: rgb(93, 87, 87);
}
.comment a :hover{
    background-color: antiquewhite;
}
.selector-container{
    background-color: rgb(255, 255, 255);
    height: 100px;
}
.el-badge{
    height: 45px;
    margin-top: 25px;
    margin-left: 100px;
}
</style>